<template>
    <view class="container">
        <view>
            <view class="header">
                <view class="userinfo">
                    <view class="face"><image src="/static/image/icon/y8.jpg" mode="aspectFill"></image></view>
                    <view class="info">
                        <view v-if="userInfo.nickName" class="username">{{userInfo.nickName}}</view>
                        <text v-else class="username" @tap="Login">点击登录</text>
                        <view style="display: flex;align-items: center">
                            <view class="integral">积分:{{userInfo.integral || 0}}</view>
                            <view style="padding-left: 15rpx;display: flex">
                                <uni-iconfont  class="icon-vipdiamond-l" size="36" color="#FFD800"></uni-iconfont>
                                <text style="color: #FFD800;margin: 8rpx 0;font-size: 30rpx;font-style:italic;">1</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="setting" @tap="navTo('/pagesA/set/set')">
                    <uni-icons type="gear" color="#fff" :size="60" ></uni-icons>
                </view>
            </view>
            <view class="orders">
                <view class="box">
                    <view class="tui-btm-item" @tap="navTo('/pages/my/components/wallet?money=' + userInfo.walletBalance)">
                        <view class="tui-btm-num">{{userInfo.walletBalance || 0}}</view>
                        <view class="tui-btm-text">钱包</view>
                    </view>
                    <view class="tui-btm-item" @tap="navTo('/pagesA/integral/integral')">
                        <view class="tui-btm-num">{{userInfo.integral || 0}}</view>
                        <view class="tui-btm-text">积分</view>
                    </view>
                    <view class="tui-btm-item" @tap="navTo('/pagesA/card/card')">
                        <view class="tui-btm-num">{{userInfo.cartNum || 0}}</view>
                        <view class="tui-btm-text">购物车</view>
                    </view>
                </view>
            </view>
        </view>

        <view style="margin: 20rpx">
            <zetank-wode-server icons="icon-bill" colors="#6CB041"
                                :rightshow="false" :serverList="ticketList" >
                我的门票
            </zetank-wode-server>
        </view>

        <view style="margin: 20rpx">
            <zetank-wode-server icons="icon-dingdan" colors="#FF6666"
                                :rightshow="false" :serverList="serverList" >
                我的订单
            </zetank-wode-server>
        </view>
        <!--v-if="userInfo.isStaff == 0"-->
        <view style="margin: 20rpx" v-if="userInfo.isStaff == 0">
            <zetank-wode-server icons="icon-zulinguanli" colors="#5FDBEC"
                                :rightshow="false" :serverList="leaseList" >
                租赁记录
            </zetank-wode-server>
        </view>

        <view style="margin: 20rpx">
            <zetank-wode-server icons="icon-gongju1" :rightshow="false"
                                :serverList="instrumentList" @linkClick="linkClick">
                我的工具
            </zetank-wode-server>
        </view>

        <!-- 登录提示 -->
        <uni-login-model></uni-login-model>

    </view>
</template>

<script>
    import { mapMutations, mapActions, mapState } from 'vuex'
    import uniIconfont from '@/components/uni-iconfont/index'
    import zetankWodeServer from './components/zetank-wode-server'
    import uniLoginModel from '@/components/uni-login-model/uni-login-model.vue'

    export default {
        name: "my2.vue",
        components: {
            uniIconfont, zetankWodeServer, uniLoginModel
        },
        data() {
            return {
                serverList:[
                    {
                        name: '待付款', icon: 'icon-daifukuan', url: '/pagesA/order/order?state=1',
                        id: 1, elseUrl: '', colors: '#FF6666'
                    }, {
                        name: '待使用', icon: 'icon-daishiyong', url: '/pagesA/order/order?state=2',
                        id: 2, elseUrl: '', colors: '#FF6666'
                    }, {
                        name: '待评价', icon: 'icon-daipingjia', url: '/pagesA/order/order?state=3',
                        id: 3, elseUrl: '', colors: '#FF6666'
                    }, {
                        name: '售后', icon: 'icon-shouhou', url: '/pagesA/order/order?state=4',
                        id: 4, elseUrl: '', colors: '#FF6666'
                    }
                ],
                ticketList: [
                    {
                        name: '待付款', icon: 'icon-daifukuan', url: '/pagesA/order/ticketOrder?state=1&id=0',
                        id: 1, elseUrl: '', colors: '#6CB041'
                    }, {
                        name: '待使用', icon: 'icon-daishiyong', url: '/pagesA/order/ticketOrder?state=2&id=2',
                        id: 2, elseUrl: '', colors: '#6CB041'
                    }, {
                        name: '待评价', icon: 'icon-daipingjia', url: '/pagesA/order/ticketOrder?state=3&id=4',
                        id: 3, elseUrl: '', colors: '#6CB041'
                    }, {
                        name: '售后', icon: 'icon-shouhou', url: '/pagesA/order/ticketOrder?state=4&id=5',
                        id: 4, elseUrl: '', colors: '#6CB041'
                    }
                ],
                leaseList: [
                    {
                        name: '待领取', icon: 'icon-daifukuan', url: '/pagesA/coupons/leaseList?id=0',
                        id: 1, elseUrl: '', colors: '#5FDBEC'
                    }, {
                        name: '待归还', icon: 'icon-daishiyong', url: '/pagesA/coupons/leaseList?id=1',
                        id: 2, elseUrl: '', colors: '#5FDBEC'
                    }, {
                        name: '已归还', icon: 'icon-daipingjia', url: '/pagesA/coupons/leaseList?id=2',
                        id: 3, elseUrl: '', colors: '#5FDBEC'
                    },
                ],
                instrumentList: [
                    {
                        name: '优惠券', icon: 'icon-youhuiquan', url: '/pagesA/coupons/coupons',
                        id: 1, elseUrl: '', colors: '#FF6666'
                    }, {
                        name: '积分明细', icon: 'icon-jifen', url: '/pagesA/integral/integral',
                        id: 2, elseUrl: '', colors: '#FF9900'
                    }, {
                        name: '发票中心', icon: 'icon-invoice', url: '/pagesA/coupons/invoice',
                        id: 3, elseUrl: '', colors: '#0099CC'
                    },{
                        name: '会员中心', icon: 'icon-vipdiamond-l', url: '/pagesA/set/members',
                        id: 4, elseUrl: '', colors: '#FFCC33'
                    }, {
                        name: '扫一扫', icon: 'icon-saoyisao', url: '',
                        // url: '/pages/perform/dacizi-h5scan',
                        id: 5, elseUrl: '', colors: '#FF6666'
                    }, {
                        name: '地址管理', icon: 'icon-ziyuan', url: '/pages/perform/address',
                        id: 6, elseUrl: '', colors: '#339999'
                    }, {
                        name: '意见反馈', icon: 'icon-woyaofankui', url: '/pagesA/opinion/opinion',
                        id: 7, elseUrl: '', colors: '#993399'
                    }, {
                        name: '常见问题', icon: 'icon-changjianwentibangzhu', url: '/pagesA/answer/problem',
                        id: 8, elseUrl: '', colors: '#669933'
                    }, {
                        name: '设置', icon: 'icon-shezhi1', url: '/pagesA/set/set',
                        id: 9, elseUrl: '', colors: '#996633'
                    },
                ]
            }
        },
        computed: {
            ...mapState({
                userInfo: state => state.user.userInfo
            })
        },
        onLoad() {
        },
        onShow() {
            this.$store.dispatch('getUserInfo').then(res => {
                store.commit('LOGIN_TIP', false);
                store.commit('USER_INFO', res.data);
                uni.setStorageSync('userInfo', res.data);
            }).catch(error => {})
        },
        async created() {
            const url = location.href.split('#')[0]
            uni.request({
                url: 'https://test.drawmap.lindingtechnology.com/weapp/getWxConfig',
                data: { url },
                method: 'POST',
                success: (res) => {
                    // console.log(res)
                    this.$wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: res.data.data.appid, // 必填，公众号的唯一标识
                        timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
                        nonceStr: res.data.data.noncestr, // 必填，生成签名的随机串
                        signature: res.data.data.signature, // 必填，签名
                        jsApiList: ['openLocation', 'getLocation', "onMenuShareTimeline", "onMenuShareAppMessage", "scanQRCode"] // 必填，需要使用的JS接口列表
                    })
                    this.$wx.error(function(res) {
                        console.log(JSON.stringify(res) + 'err')
                    })
                    this.$wx.ready()
                },
                fail: (error => {
                })
            })
            // this.scanCode()
        },
        methods: {
            navTo(url) {
                uni.navigateTo({ url: url })
            },
            Login() {
                // #ifdef H5
                uni.navigateTo({
                    url: '/pagesA/public/login'
                });
                // #endif

                /*this.$wx.miniProgram.reLaunch({
                    url: "/pages/authorize/authorize",
                    success: function(){
                        console.log('success')
                    },
                    fail: function(err){
                    },
                    complete:function(){
                        console.log('complete');
                    }
                });*/
            },
            linkClick(item) {
                console.log(item)
                if (item.id == 5) {
                    this.scanCode()
                }
            },
            // 扫一扫  生成二维码链接：https://app.wecoing.com/#/pages/perform/dacizi-h5scan?staffId=2&staffName=小曾&staffPhone=17607909843
            scanCode() {
                let than = this
                this.$wx.scanQRCode({
                    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                    scanType: ["qrCode", "barCode"],
                    desc: 'scanQRCode desc',
                    success: function(res) {
                        var result = res.resultStr;
                        // void plus.runtime.openFile( filepath, options, errorCB );
                        // void plus.runtime.openURL(res.result)
                        window.open(result)
                    },
                    fail(err){
                        console.info('点击扫描按钮err...',err)
                    }
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        padding-bottom: 120rpx;
    }
    .header{
        background-color:#6CB041;
        height:32vw;
        padding:0 4%;
        display:flex;
        align-items:center;
        .userinfo{
            display:flex;
            width: 80%;
            .face{
                flex-shrink:0;
                width:15vw;
                height:15vw;
                image{
                    width:100%;
                    height:100%;
                    border-radius:100%;
                }
            }
            .info{
                display:flex;
                flex-flow:wrap;
                padding-left:30upx;
                .username{
                    width:100%;
                    color:#fff;
                    font-size:40upx;
                }
                .integral{
                    display:flex;
                    align-items:center;
                    padding:0 20upx;
                    height:40upx;
                    color:#fff;
                    background-color:rgba(0,0,0,0.1);
                    border-radius:20upx;
                    font-size:24upx
                }
            }
        }
        .setting{
            position: relative;
            right: -10%;
        }
    }
    .orders {
        background-color: #6CB041;
        height: 13vw;
        padding: 0 2%;
        margin-bottom: calc(11vw + 10upx);
        display: flex;
        align-items: flex-start;
        border-radius: 0 0 100% 100%;
        margin-top: -1upx;
        .box {
            width: 100%;
            padding: 0 1%;
            height: 22vw;
            background-color: #fefefe;
            box-shadow: 0 0 20 upx rgba(0, 0, 0, 0.15);
            margin-bottom: 40upx;
            display: flex;
            border-radius: 15rpx;
            align-items: center;
            justify-content: space-around;
            text-align: center;
            .tui-btm-num {
                font-size: $uni-font-size-lg;
                font-weight: 600;
            }
            .tui-btm-text {
                color: #999;
            }
        }
    }
</style>